<template>
  <div class="cleaning">
    <van-nav-bar
      title="保洁"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div>
      <h5>热门服务</h5>
      <div class="clean_top">
        <div class="top_left">
          <p>日常保洁</p>
          <div>新用户首单立减</div>
          <img
            src="https://images.daojia.com/jz/clean/homepage/71896a56ea58dd72b7d9f8a82f52b758.jpeg"
            alt=""
          />
        </div>
        <div class="top_right">
          <div class="rigith_nei" @click="$router.push('/goods_detail/' + 2)">
            <div class="nei_nei">
              <p>油烟机清洗</p>
              <div>专业拆洗</div>
            </div>

            <img
              src="https://images.daojia.com/jz/clean/homepage/6c8efb49420cd768a3603a2db2abcacd.jpeg"
              alt=""
            />
          </div>
          <div class="rigith_nei" @click="$router.push('/goods_detail/' + 9)">
            <div class="nei_nei">
              <p>洗衣机清洗</p>
              <div>专项深度清洁</div>
            </div>

            <img
              src="https://images.daojia.com/jz/clean/homepage/0896c103c3bf2747dbed737df0d99d31.jpeg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <h5>家具家电清洗</h5>
      <div class="clean_bottom">
        <div class="clean_icon" @click="$router.push('/goods_detail/' + 1)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/2a96aacc3d09fcfa6e71c6864d46fee2.jpeg"
            alt=""
          />
          <p>擦玻璃</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 6)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/1e2743576a2c9badb7d49698b3c02efc.jpeg"
            alt=""
          />
          <p>厨房保洁</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 8)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/5dd729f72edec89d772185dd8a35220e.jpeg"
            alt=""
          />
          <p>卫浴保洁</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 9)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/c45e22f2983b3ef71a3c3dc6ce4dcba3.jpeg"
            alt=""
          />
          <p>除螨清洁</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 3)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/8bc951c8eb341312755f8adc2c0d9e9d.jpeg"
            alt=""
          />
          <p>地毯清洗</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 5)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/eebbef1b5da84999fac214af413b6cab.jpeg"
            alt=""
          />
          <p>做饭小时工</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 9)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/41001e2e8292a6cff19e4dd5e497d81c.jpeg"
            alt=""
          />
          <p>洗衣机清洗</p>
        </div>

        <div class="clean_icon" @click="$router.push('/goods_detail/' + 4)">
          <img
            src="https://images.daojia.com/jz/clean/homepage/f7ae7cdfc26ecbc967485013a1a47c6b.jpeg"
            alt=""
          />
          <p>母乳喂养</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  async getCateById() {},
};
</script>
<style lang='less' scoped>
h5 {
  margin-left: 15px;
}
.clean_top {
  display: flex;
  justify-content: space-around;
  .top_left {
    // flex: 40%;
    width: 150px;
    padding-top: 5px;
    padding-left: 5px;
    background-color: #f8f8f9;
    p {
      font-size: 16px;
      margin: 0;
    }
    div {
      font-size: 12px;
      font-weight: 300;
    }
    img {
      width: 100px;
      margin-left: 50px;
    }
  }
  .top_right {
    // flex: 40%;
    width: 145px;
    display: flex;
    flex-direction: column;
    padding-left: 5px;

    justify-content: space-between;
    .rigith_nei {
      height: 65px;
      display: flex;
      background-color: #f8f8f9;
      .nei_nei {
        p {
          font-size: 14px;
          margin: 0;
        }
        div {
          font-size: 10px;
          font-weight: 300;
        }
      }
      img {
        margin-left: 10px;
        width: 60px;
        height: 60px;
      }
    }
  }
}
.clean_bottom {
  margin: 0 10px;
  height: 185px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  .clean_icon {
    flex: 25%;
    img {
      height: 60px;
    }
    p {
      font-size: 14px;
      margin: 0;
    }
  }
}
</style>